
<template>
    <theme-box title="营销结算分钱规则添加">
        <form class="form-inline" @submit.prevent v-el:form>
            <div class="box-body">
                <form-select title="商户号" :required="true" name="mchtId" :options="mchtList" :value.sync="mchtIdValue"></form-select>
                <form-input title="规则名称" :required="true" name="ruleName"></form-input>
                <form-select title="电子券类型" :required="true" name="couponType" :options="type"></form-select>
                <form-select title="结算标识" :required="true" name="conFlag" :options="con_flag" :value.sync="conFlagVal"></form-select>
                <form-input title="结算" :required="true" name="markCon" :value.sync="markConVal"></form-input>
                <form-input title="芸券份额" :required="false" name="yqProp" :read-only='true'></form-input>
                <form-input title="代理商份额" :required="false" name="agentProp" :value.sync="agentPropValue" v-show="this.conFlag_val == 'percent'"></form-input>
                <form-input title="用户份额" :required="false" name="usrProp" :value.sync="usrPropValue" v-show="this.conFlag_val == 'percent'"></form-input>
                <div class="box1">
                    <form-input title="代理商户份额" :required="false" name="agentMcht" :value.sync="agentMchtValue"></form-input>
                    <form-input title="代理店员份额" :required="false" name="agentOpr" :value.sync="agentOprValue" ></form-input>
                </div>
                <div class="box2">
                    <form-input title="扫码份额" :required="false" name="scanCon" :value.sync="scanConValue"></form-input>
                    <form-input title="使用份额" :required="false" name="useProp" :value.sync="usePropValue"></form-input>
                    <form-input title="分享份额" :required="false" name="shareCon" :value.sync="shareConValue"></form-input>
                    <form-input title="分享层级" :required="false" name="shareLvl" id="shareLvl"></form-input>
                    <form-select title="层级比例" :required="false" name="lvlCon" :options="lvl" id="lvlCon"></form-select>
                    <form-input title="最后分享份额" :required="false" name="lastShare" :value.sync="lastShareValue"></form-input>
                </div>
            </div>
            <!-- /.box-body -->
            <div class="box-footer">
                <v-button type="reset" @click="reset">重置</v-button>
                <v-button type="submit" theme="primary" class="pull-right">确认</v-button>
            </div>
            <!-- /.box-footer -->
        </form>
    </theme-box>
</template>
<script>
    import 'plugins/jquery-validation';
    import 'lib/validatorByte.js';
    var serialize = require('form-serialize');


    export default {
        data: () => ({
            repVal:'',
            mchtList: [],
            mchtIdValue:'',
            conFlag_val:'',
            conFlagVal:'',
            markConVal:'',
            agentPropValue:'',
            usrPropValue:'',
            agentMchtValue:'',
            agentOprValue:'',
            scanConValue:'',
            usePropValue:'',
            shareConValue:'',
            lastShareValue:'',
            type:[
                {key: "折扣券",value: "rebate"},
                {key: "抵用券",value: "voucher"},
                {key: "代金券",value: "cash"},
//                {key: "礼品券",value: "present"},
//                {key: "门票",value: "ticket"}
            ],
            con_flag:[
                {key: "百分比",value: "percent"},
                {key: "实际金额",value: "amt"}
            ],
            lvl:[
                {key: "1",value: "1"},
                {key: "2",value: "2"},
                {key: "3",value: "3"},
                {key: "4",value: "4"},
                {key: "5",value: "5"}
            ]
        }),
        watch:{
            //芸券比例根据商户拉出
            async  mchtIdValue(v){
                var rep = await this.$post({
                    url: "/api/v2" + projectName_Url + "/plat/mcht/getMchtProp/" + v,
                    method: "GET",
                })
                this.repVal = rep.content.useProp;
                this.$els.form.yqProp.value = rep.content.useProp
            },
            conFlagVal(v){
                this.conFlag_val = v;
                if(v == 'amt'){
                    $(".box1").css("display",'');
                    $(".box2").css("display",'');
                    $(this.$els.form.markCon).rules("remove", "min");
                    $(this.$els.form.markCon).rules("remove", "max");
                    //如果是金额 芸券比例=芸券金额=结算*芸券比例
                    //芸券比例是0 金额和百分比的时候都为0
                    if(this.repVal == 0){
                        this.$els.form.yqProp.value = 0;
                    }else{
                        this.$els.form.yqProp.value =  ((this.repVal)*0.01*$('#markCon').val());
                        if( this.$els.form.yqProp.value < 1){
                            this.$els.form.yqProp.value = 1;
                        }else{
                            this.$els.form.yqProp.value = Math.floor(this.$els.form.yqProp.value);
                        }
                    }
                }else{
                    //清空结算值
                    $('#markCon').val('');
                    //重新给芸券金额赋值
                    this.$els.form.yqProp.value = this.repVal
                    //结算限制为1-50
                    $(this.$els.form.markCon).rules("add", {
                        min:1,
                        max:50
                    });
                }
            },
            //监听结算
            markConVal(v){
               if(this.conFlag_val == 'amt'){
                   //如果是金额 芸券金额=结算*芸券比例
                   //芸券比例是0 金额和百分比的时候都为0
                   if(this.repVal == 0){
                       this.$els.form.yqProp.value = 0;
                   }else{
                       this.$els.form.yqProp.value =  (this.repVal)*0.01*v;
                       if( this.$els.form.yqProp.value < 1){
                           this.$els.form.yqProp.value = 1;
                       }else{
                           this.$els.form.yqProp.value = Math.floor(this.$els.form.yqProp.value);
                       }
                   }
               }
            },
            //代理商比例为空 代理商户和代理店员也不填
            agentPropValue(value){
                if(value != '' && value != '0'){
                    $(".box1").css("display",'');
                    $(this.$els.form.agentProp).rules("add", {
                        int:true
                    });
                }else{
                    $(".box1").css("display",'none');
                    $(this.$els.form.agentProp).rules("remove", "int");
                }
            },
            //有代理商户 为整数
            agentMchtValue(value){
                if(value != '' && value != '0'){
                    $(this.$els.form.agentMcht).rules("add", {
                        int:true
                    });
                }else{
                    $(this.$els.form.agentMcht).rules("remove", "int");
                }
            },
            agentOprValue(value){
                if(value != '' && value != '0'){
                    $(this.$els.form.agentOpr).rules("add", {
                        int:true
                    });
                }else{
                    $(this.$els.form.agentOpr).rules("remove", "int");
                }
            },
            //有用户比例
            usrPropValue(value){
                if(value != '' && value != '0'){
                    $(".box2").css("display",'');
                    $(this.$els.form.usrProp).rules("add", {
                        int:true
                    });
                }else{
                    $(".box2").css("display",'none');
                    $(this.$els.form.usrProp).rules("remove", "int");
                }
            },
            //有扫码比例
            scanConValue(value){
                if(value != '' && value != '0'){
                    $(this.$els.form.scanCon).rules("add", {
                        int:true
                    });
                }else{
                    $(this.$els.form.scanCon).rules("remove", "int");
                }
            },
            usePropValue(value){
                if(value !=''&& value != '0'){
                    $(this.$els.form.useProp).rules("add", {
                        int:true
                    });
                }else{
                    $(this.$els.form.useProp).rules("remove", "int");
                }
            },
            shareConValue(value){
                    if (value != '' && value != '0') {
                        $(this.$els.form.shareCon).rules("add", {
                            int: true
                        });
                        //如果分享比例必填 分享层级最小1最大5 层级比例最小5 最大1
                        $("#shareLvl").css("display", 'block');
                        $("#lvlCon").css("display", 'block');
                        $(this.$els.form.shareLvl).rules("add", {
                            required: true,
                            max: 5,
                            min: 1,
                            int: true
                        });
                    } else {
                        $("#shareLvl").css("display", 'none');
                        $("#lvlCon").css("display", 'none');
                        $(this.$els.form.shareCon).rules("remove", "int");
                    }
            },
            lastShareValue(value){
                if (value != '' && value != '0') {
                    $(this.$els.form.lastShare).rules("add", {
                        int: true
                    });
                } else {
                    $(this.$els.form.lastShare).rules("remove", "int");
                }
            }
        },
        methods: {
            reset() {
                $("label.error").remove();
                this.$els.form.reset();
                //
                this.$post({
                    url: "/api/v2" + projectName_Url + "/plat/mcht/getMchtProp/" + this.$els.form.mchtId.value,
                    method: "GET",
                }).then(response =>{
                    this.repVal = response.content.yqProp;
                    $('#yqProp').attr('value',this.repVal);
                });
            },
            getMcht(data) {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId;
                self.$post({
                    url: "/api/v2" + projectName_Url + "/list/mcht/"+ mchtId,
                    method:"GET"
                }).then(response => {
                    let list = response.content.info;
                    self.$set("mchtList", list);
                    self.mchtIdValue = list[0].value
                    let _value = []
                    for(var i = 0;i < list.length;i++){
                        _value.push(list[i].value)
                    }
                }, error => {});
            }
        },
        ready() {
            var self = this;
            self.getMcht();
            $("#shareLvl").css("display", 'none');
            $("#lvlCon").css("display", 'none');
            $(".box1").css("display",'none');
            $(".box2").css("display",'none');
            $(this.$els.form).validate({
                submitHandler: async function() {
                    var _data = serialize(this.currentForm, {
                        hash: true,
                        empty: true
                    });
                    //传当前登录的操作员id
                    var oprId = JSON.parse(localStorage.getItem("id_token")).oprId
                    _data.updOpr = oprId;
                    //
                    var yqPropValue =( $('#yqProp').val() == ''?0:parseInt($('#yqProp').val()));
                    var agentPropValue =($('#agentProp').val() == ''?0:parseInt($('#agentProp').val()));
                    var usrPropValue =($('#usrProp').val() == ''?0:parseInt($('#usrProp').val()));
                    var agentMchtValue = ($('#agentMcht').val() == ''?0:parseInt($('#agentMcht').val()));
                    var agentOprValue = ($('#agentOpr').val() == ''?0:parseInt($('#agentOpr').val()));
                    var scanConValue = ($('#scanCon').val() == '' ? 0 : parseInt($('#scanCon').val()));
                    var shareConValue = ($('#shareCon').val() == '' ? 0 : parseInt($('#shareCon').val()));
                    var usePropValue = ($('#useProp').val() == '' ? 0 : parseInt($('#useProp').val()));
                    var lastShareValue = ($('#lastShare').val() == '' ? 0 : parseInt($('#lastShare').val()));
                    //如果是百分比 判断各比例之和
                    if(self.$els.form.conFlag.value == 'percent'){
                        //芸券比例+代理商比例+用户比例
                        if(yqPropValue + agentPropValue + usrPropValue != '100'){
                            Midway.alert({title:"操作提示:结算标识是百分比",content:"芸券份额,代理商份额,用户份额的和为100"});
                            return false;
                        }
                        if(agentPropValue != ''){
                            //代理商户比例+代理店员比例=100
                            if(agentMchtValue + agentOprValue != '100'){
                                Midway.alert({title:"操作提示:结算标识是百分比",content:"代理商户份额与代理店员份额的和为100"});
                                return false;
                            }
                        }else{

                        }

                        //有用户比例的情况下 扫码比例 分享比例 使用比例 最后分享比例 四个必填一项
                        if(usrPropValue !='' && usrPropValue != '0') {
                            if (scanConValue == '' && shareConValue == '' && usePropValue == '' && lastShareValue == '') {
                                Midway.alert({title: "操作提示:结算标识是百分比", content: "扫码份额、分享份额、使用份额、最后分享份额至少填一项"});
                                return false;
                            };
                            //扫码比例+分享比例+使用比例 = 100
                            if(scanConValue + shareConValue + usePropValue + lastShareValue != '100'){
                                Midway.alert({title:"操作提示:结算标识是百分比",content:"扫码份额、分享份额、使用份额、最后分享份额的和为100"});
                                return false;
                            }
                        }
                        if(_data.shareCon == '' || _data.shareCon == '0'){
                            _data.lvlCon = 0;
                        }else{
                            _data.lvlCon =  _data.lvlCon;
                        }
                    }else{
                        // 如果是金额 判断金额的和等于结算
                        if(yqPropValue + agentMchtValue + agentOprValue + scanConValue + usePropValue +shareConValue + lastShareValue != parseInt($('#markCon').val())){
                            Midway.alert({title: "操作提示:结算标识是金额", content: "各项金额之和需等于结算"});
                            return false;
                        }
                    }

                    //分享层级 和 层级比例要么都为1，要么都不为1
                    if(_data.shareLvl > 1 && _data.lvlCon == 1){
                        Midway.alert({title:"操作提示",content:"分享层级大于1时，层级比例不能为1"});
                        return false;
                    }else if(_data.shareLvl== 1 && _data.lvlCon != 1){
                        Midway.alert({title:"操作提示",content:"分享层级等于1时，层级比例只能为1"});
                        return false;
                    }
                    
                    var result = await self.$post({
                        url: "/api/v2"+ projectName_Url +"/plat/userule/add",
                        data: _data
                    })
                    let data = {
                        title: "操作成功",
                        content: "是否进入营销结算分钱规则列表查看?"
                    }
                    Midway.confirm(data).then(function () {
                        self.$route.router.go('/settlementRule/list');
                    })
                    self.reset()
                },

                errorPlacement: function(error, element) {
                    if (element.attr("name") == "file") {
                        error.insertAfter(".file-item");
                    } else {
                        error.insertAfter(element)
                    }
                },
                rules: {
                    ruleName:{
                        required:true,
                        maxlength:32
                    },
                    agentProp:{
                        min:0,
                    },
                    usrProp:{
                        min:0,
                    },
                    agentMcht:{
                        min:0,
                    },
                    agentOpr:{
                        min:0,
                    },
                    scanCon:{
                        min:0,
                    },
                    useProp:{
                        min:0,
                    },
                    shareCon:{
                        min:0,
                    },
                    shareLvl:{
                        min:0,
                    },
                    markCon:{
                        min:0,
                        int:true,
                        required:true
                    }

                },
            });
        }
    }
</script>
